<script>
import { getCurrentInstance } from 'vue';
import barTopNav from '@/components/barTopNav.vue';
import barLeftNav from '@/components/barLeftNav.vue';
import barFooterNav from '@/components/barFooterNav.vue';

export default {
    data() {
        return {
            globalVar: getCurrentInstance().proxy.$globalVar,
            menus: [
                { title: '工作台', icon: 'mdi-home', link: '/pageIndex' },
                {
                    title: '商户管理', icon: 'mdi-view-dashboard', link: '#pos', ref: 'pos', child: [
                        { title: '连锁团体', link: '/pagePosList' },
                        { title: '商户列表', link: '/pagePosList' },

                    ]
                },
                { title: '员工管理', icon: 'mdi-account-multiple', link: '/pagePosList' }
            ]
        }
    },
    mounted() {
        console.log(`mounted home...`);
        if (!this.globalVar.token) {
            console.log('main to login');
            this.$router.push({ path: '/' });
        } else {
            this.$router.push({ path: '/pageIndex' });
        }


        // const script = document.createElement('script');
        // script.type = 'text/javascript';
        // script.src = this.src;
        // script.onload = () => console.log('Script loaded successfully.');
        // document.head.appendChild(script);

        // }, props: {
        //     // 父组件传递的属性
        //     title: {
        //         type: String,
        //         required: true,
        //         default: 'Hello Vue!'
        //     },
        //     about: {
        //         type: String,
        //         required: true,
        //         default: 'This is a Vue component.'
        //     }
    }, components: {
        barTopNav, barLeftNav, barFooterNav
    }, methods: {
        logout() {
            // this.$emit('logout');
            this.globalVar.token = null;
            this.globalVar.user = null;
            this.globalVar.info = null;
            localStorage.removeItem('token');
            localStorage.removeItem('user');
            localStorage.removeItem('info');
            localStorage.removeItem('login');
            this.$router.push({ path: '/' });
        },
        showPosition() {
            console.log('position');
        }
    }
}
</script>
<template>
    <div class="container-scroller">
        <barTopNav title="测试项目demo"></barTopNav>
        <div class="container-fluid page-body-wrapper">
            <nav class="sidebar sidebar-offcanvas" id="sidebar">
                <ul class="nav">
                    <li class="nav-item" v-for="site in menus">
                        <div v-if="site && site.child">
                            <a class="nav-link" :href="site.link" data-bs-toggle="collapse">
                                <i class="mdi menu-icon" :class="[site.icon]"></i>
                                <span class="menu-title">{{ site.title }}</span>
                                <i class="menu-arrow" v-if="site && site.child"></i>
                            </a>
                            <div class="collapse" v-if="site && site.child" :id="site.ref">
                                <ul class="nav flex-column sub-menu" v-for="child in site.child">
                                    <li class="nav-item">
                                        <a class="nav-link" @click="$router.push(child.link)">{{ child.title }} </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <a class="nav-link" v-else @click="$router.push(site.link)">
                            <i class="mdi menu-icon" :class="[site.icon]"></i>
                            <span class="menu-title">{{ site.title }}</span>
                            <i class="menu-arrow" v-if="site && site.child"></i>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="main-panel">
                <div class="content-wrapper"><router-view /></div>
                <barFooterNav> </barFooterNav>
            </div>
        </div>
    </div>
</template>

<style></style>